<template>
    <div class="container">
        <Breadcrumb :items="['menu.list', '首页']" />
        <a-card class="general-card" title="系统首页">
            <a-row :style="{ marginBottom: '20px' }">
                <a-col>
                    <a-row :gutter="16">
                        <a-col :span="8">
                            <a-range-picker @change="onChange" @select="onSelect" />
                        </a-col>
                        <a-col :span="16">
                            <div class="search-btn">
                                <a-button style="background: #3E3E69;color: #FFFFFF;" @click="search">查询</a-button>
                                <a-button type="primary" @click="czData">重置</a-button>
                            </div>

                        </a-col>
                    </a-row>
                </a-col>
            </a-row>


            <a-row :gutter="20" :style="{ marginBottom: '20px' }">
                <a-col :span="6">
                    <a-card bordered>
                        <div class="generalname">
                            消费总次数(次)
                        </div>
                        <div class="generalcount">
                            {{ totalamount.totalCount ? totalamount.totalCount : 0 }}
                        </div>
                    </a-card>
                </a-col>
                <a-col :span="6">
                    <a-card bordered>
                        <div class="generalname">
                            消费总金额(元)
                        </div>
                        <div class="generalcount">
                            {{ totalamount.totalFee ? totalamount.totalFee : 0 }}
                        </div>
                    </a-card>
                </a-col>
                <a-col :span="6">
                    <a-card bordered>
                        <div class="generalname">
                           网点数
                        </div>
                        <div class="generalcount">
                            {{ totalamount.deviceCount ? totalamount.deviceCount : 0 }}
                        </div>
                    </a-card>
                </a-col>
                <a-col :span="6">
                    <a-card bordered>
                        <div class="generalname">
                            设备总数(台)
                        </div>
                        <div class="generalcount">
                            {{ totalamount.siteCount ? totalamount.siteCount : 0 }}
                        </div>
                    </a-card>
                </a-col>
            </a-row>
            <a-divider />

            <div class="title-name">
                <div class="title-span"></div>
                用户消费变化趋势图
            </div>

            <div class="title-chart">
                <Bar1 ref="bar1" id="bar1-01" />

            </div>
        </a-card>

    </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'

import Bar1 from './bar1.vue'

import { devicesitestats, recordsstats, recordsdailyfee } from '@/api/hairdryer'


let formData = ref({})


let bar1 = ref()

const onSelect = (dateString, date) => {
    console.log(dateString);

    if (dateString.length > 0) {
        formData.value.start = dateString[0]
        formData.value.end = dateString[1]
    }


}

const onChange = (dateString, date) => {
    console.log(dateString);

    //清空
    formData.value = {}
}

//查询按钮
const search = () => {
    getrecordsstats()
    getdevicesitestats()
    getrecordsdailyfee()
}

//重置
const czData = () => {
    //清空
    formData.value = {}
    getrecordsstats()
    getdevicesitestats()
    getrecordsdailyfee()
}


let totalamount = ref({
    totalCount: 0, //充值订单总计
    totalFee: 0, //充值金额总计
    deviceCount: 0,
    siteCount: 0,
})

//获取列表1
const getdevicesitestats = async () => {
    try {
        let res = await devicesitestats(formData.value)
        totalamount.value.deviceCount = res.data.deviceCount
        totalamount.value.siteCount = res.data.siteCount

    } catch (error) {

    }

}

//获取列表2

const getrecordsstats = async () => {
    try {
        let res = await recordsstats(formData.value)
        console.log(res, '2');
        totalamount.value.totalCount = res.data.totalCount
        totalamount.value.totalFee = res.data.totalFee

    } catch (error) {
        console.log(error);

    }
}


//获取echer
const getrecordsdailyfee = async () => {

    try {
            bar1.value.ecLoading()

        let res = await recordsdailyfee(formData.value)
        if (res.data && res.data.length > 0) {
            bar1.value.echartInit(res.data)
        }



    } catch (error) { }
}


onMounted(() => {
    getrecordsstats()
    getdevicesitestats()
    getrecordsdailyfee()
})

</script>
<style scoped lang="less">
.container {
    padding: 0 20px 20px 20px;

    .search-btn {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        gap: 0 10px;
    }

    .generalname {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .generalcount {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        font-size: 20px;
        font-weight: bold;
        color: #000;
    }

    .title-name {
        display: flex;
        align-items: center;
        gap: 0 5px;
        font-size: 16px;

        .title-span {
            width: 5px;
            height: 15px;
            background-color: #47bc91;
        }

    }

    .title-chart {
        width: 100%;
        height: calc(50vh - 25px);
        margin-top: 20px;
    }


}
</style>